<script setup lang="ts">
import { reactive, ref } from 'vue'
import type {userLoginFrom} from "@/request/types/user";
import type {FormRules} from "element-plus";
import {Register} from "@/request/api/Login";
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

const isShowLogin = ref(true); // 初始显示登录表单
const isShowRegister = ref(false); // 初始隐藏注册表单

const loginForm = reactive<userLoginFrom>({
  userName: '',
  password: ''
})

const registerForm = reactive<userLoginFrom>({
  userName: '',
  password: ''
})

const rules = reactive<FormRules<userLoginFrom>> ({
  userName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 4, max: 12, message: '账号长度为4到12', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 16, message: '密码长度为8到16', trigger: 'blur' },
  ]
})
const store = useStore()
//首先在setup中定义
const router = useRouter()
// 登录请求
const onSubmitLogin = () => {
  console.log(loginForm)
  store.dispatch('Login', loginForm).then((res: any) => {
    console.log(res)
    if (res === 200) {
      alert("登录成功")
      router.push('/home')
    }
  })
}
//注册请求
const onSubmitRegister = () => {
  Register(registerForm).then((res:any) => {
    if (res.code === 200) {
      console.log(res)
      store.dispatch('Login', registerForm).then((res: any) => {
        console.log(res)
        if (res === 200) {
          alert("注册成功并登录")
          router.push('/')
        }
      })
    } else {
      alert("注册失败！请重新再试！")
      console.error(res)
      //清空表单数据
      registerForm.userName = '';
      registerForm.password = '';
    }
  })
}
//页面切换
const onChangeLogin = () => {
  isShowLogin.value = false;
  isShowRegister.value = true;
};

const onChangeRegister = () => {
  isShowLogin.value = true;
  isShowRegister.value = false;
};

</script>
<template>
  <div class="login" style="width: 100%; height: 100vh;display: flex; justify-content: center; align-items: center;">
    <el-form v-if="isShowLogin" :model="loginForm" :rules="rules" label-width="auto" style="max-width:600px;border: 1px solid #ffffff; padding: 30px">
      <div style="display: flex; justify-content: center; align-items: center; flex-direction: column">
        <img src="../assets/logo.png" alt="logo">
        <div style="margin-bottom: 10px;font-size: 30px">校园杂谈</div>
      </div>
      <el-form-item label="账号：">
        <el-input
            v-model="loginForm.userName"
            style="width: 240px"
            placeholder="请输入账号"
        />
      </el-form-item>
      <el-form-item label="密码：">
        <el-input
            v-model="loginForm.password"
            style="width: 240px"
            type="password"
            placeholder="请输入密码"
            show-password
        />
      </el-form-item>
      <el-form-item style="margin-left:60px;">
        <el-button style="width: 200px;" type="primary" @click="onSubmitLogin">登录</el-button>
      </el-form-item>
      <div style="font-size: 10px;margin-left: 140px; cursor: pointer; color: blue" @click="onChangeLogin">点击注册</div>
    </el-form>

    <!--注册-->
    <el-form v-if="isShowRegister" :model="registerForm" :rules="rules" label-width="auto" style="max-width:600px;border: 1px solid #ffffff; padding: 30px">
      <div style="display: flex; justify-content: center; align-items: center; flex-direction: column">
        <img src="../assets/logo.png" alt="logo">
        <div style="margin-bottom: 10px;font-size: 30px">校园杂谈</div>
      </div>
      <el-form-item label="账号：">
        <el-input
            v-model="registerForm.userName"
            style="width: 240px"
            placeholder="请输入账号"
        />
      </el-form-item>
      <el-form-item label="密码：">
        <el-input
            v-model="registerForm.password"
            style="width: 240px"
            type="password"
            placeholder="请输入密码"
            show-password
        />
      </el-form-item>
      <el-form-item style="margin-left:60px">
        <el-button style="width: 200px" type="primary" @click="onSubmitRegister">注册</el-button>
      </el-form-item>
      <p style="font-size: 10px;margin-left: 130px; cursor: pointer;color: blue" @click="onChangeRegister">返回登录页面</p>
    </el-form>
  </div>
</template>
<style>
.login {
  background: url("../assets/login.jpg");
}
</style>
